<template>
  <div>
    <div>
      <h2>请选择专业：</h2>
      <button @click="Zhuanyes(0)">计科</button>
      <button @click="Zhuanyes(1)">电商</button>
      <button @click="Zhuanyes(2)">网络</button>
      <button @click="shouQi">收起</button>
    </div>
    <div v-show="isBanJi">
      <h2>请选择班级：</h2>
      <div v-if="isZhuanYe === 0">
        <button v-for="(item, index) in jiKe" @click="banjisd(index)">{{item}}</button>
      </div>
      <div v-if="isZhuanYe === 1">
        <button v-for="(item, index) in dianShang" @click="banjisd(index)">{{item}}</button>
      </div>
      <div v-if="isZhuanYe === 2">
        <button v-for="(item, index) in wangLuo" @click="banjisd(2)">{{item}}</button>
      </div>
    </div>
    <div v-show="isChou">
      <h3>你抽到的是：</h3>
      <h1><span v-for="item in ans">{{item}}</span></h1>
      <h2>请点击按钮</h2>
      <button @click="getRandomInt(1,nums)">开始生产随机数</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ChouRen",
    data(){
      return {
        isBanJi: false,
        isChou: false,
        isZhuanYe: 0,
        jiKe: ['计科1班', '计科2班', '计科3班', '计科4班', '计科5班', '计科6班'],
        dianShang: ['电商1班', '电商2班', '电商3班'],
        wangLuo: ['网络3班'],
        ans: [],
        nums: 1,
      }
    },
    methods:{
      shouQi(){
        this.isBanJi = false
        this.isChou = false
      },
      Zhuanyes(item){
        this.isBanJi = true;
        this.isChou = false;
        this.isZhuanYe = item;
        if(item == 0){
          this.ans.splice(0,1,'计科');
          this.ans.splice(2,1);
          this.nums = 30;
        }else if(item == 1){
          this.ans.splice(0,1,'电商');
          this.ans.splice(2,1);
          this.nums = 31;
        }else{
          this.ans.splice(0,1,'网络');
          this.ans.splice(2,1);
          this.nums = 30;
        }
      },
      banjisd(index){
        index = index + 1 + '班';
        this.ans.splice(2,1);
        this.ans.splice(1,1,index);
        this.isChou = true
      },
      getRandomInt(min, max) {
        let m = Math.floor(Math.random() * (max - min + 1)) + min;

        if(this.ans[1] === '4班') {
          if(m >= 17 && m <= 20) m = 30
          else if(m === 16 ||m >= 24 && m <= 25) m = 29
        }
        this.ans.splice(2,1,m);
      }
    }
  }
</script>

<style scoped>

</style>
